<template>
  <div id="app">
    <div class="nav">
      <ul>
        <Tooltip :content="item.name" placement="right" v-for="(item, index) in nav">
          <li class="select" @click="menuClick(item)">
            <svg class="icon" aria-hidden="true">
                <use :xlink:href="'#icon-'+item.icon"></use>
            </svg>
          </li>
        </Tooltip>
      </ul>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nav:[
        {name: "统计", icon: "tongji", routerName: "tj"},
        {name: "应用", icon: "yingyong", routerName: "yy"},
        {name: "人群", icon: "duixiangdongtaiguankong", routerName: "rq"},
        {name: "云盘", icon: "jintian", routerName: "yp"}
      ]
    }
  },
  methods:{
    menuClick(item) {
      this.$router.push("/"+item.routerName);
    }
  }
}
</script>

<style scoped>
.nav{
  height: 100vh;
  width: 64px;
  background: rgb(48, 48, 48);
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,.3);
  float:left;
}
.icon {
   width: 24px; height: 24px;
   vertical-align: -0.15em;
   fill: #FFF;
   overflow: hidden;
   color: #FFF;
}
.nav ul{
  margin-top: 10px;
  float: left;
}
.nav ul li{
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 10px;
}
.nav ul li.select{
  background-color: rgba(255,255,255,.1);
}
.main{
  height: 100%;
  margin-left: 64px;
}
</style>
